<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="p">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat.</p>
        </div>
        <div class="p collapsible">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
        <div class="p">
            <p>Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                ea commodo consequat.</p>
        </div>
    </div>
    <button id="toggle-button">Toggle collapse</button>
</body>
<script>
    function collapseSection(element) {
        var pHeight = element.scrollHeight;
        var elementTransition = element.style.transition;
        element.style.transition = '';
        requestAnimationFrame(function () {
            element.style.height = pHeight + 'px';
            element.style.transition = elementTransition;
            requestAnimationFrame(function () {
                element.style.height = 0 + 'px';
            });
        });
        element.setAttribute('data-collapsed', 'true');
    }

    function expandSection(element) {
        var pHeight = element.scrollHeight;
        element.style.height = pHeight + 'px';
        element.addEventListener('transitionend', function (e) {
            element.removeEventListener('transitionend', arguments.callee);
            element.style.height = null;
        });
        element.setAttribute('data-collapsed', 'false');
    }

    document.querySelector('#toggle-button').addEventListener('click', function (e) {
        var p = document.querySelector('.p.collapsible');
        var isCollapsed = p.getAttribute('data-collapsed') === 'true';
        if (isCollapsed) {
            expandSection(p)
            p.setAttribute('data-collapsed', 'false')
        } else {
            collapseSection(p)
        }
    });
</script>
<style>
</style>
</html>